import React from 'react'
import { View, Text } from '@tarojs/components'
import i18n from '@I18N'
import styles from './SurveyHeader.module.scss'

const SurveyHeader = ({
  questionType, label, required, level, isShowTopLine, ordinal, hiddenOpt, isEmpty = false
}) => {
  if (level && level > 1) {
    return (
      <View className={`${styles.sectionContainer} ${isShowTopLine ? ` ${styles.borderTopLine}` : ''}`}>
        <View className={styles.ordinalContainer}>
          <Text className={styles.ordinalTextStyle}>{ordinal}</Text>
        </View>
        <Text className={styles.labelStyle}>
          {label}
          <Text className={styles.questionTypeStyle}>
            （
            {questionType}
            {!required && `，${i18n.survey.optional()}`}
            ）
          </Text>
        </Text>
      </View>
    )
  }
  return (
    <View className={`${styles.container} ${isEmpty ? styles.emptyContainer : ''}`}>
      {!isEmpty && (
      <Text className={styles.questionType}>
        {questionType}
        {!required && !hiddenOpt && `（${i18n.survey.optional()}）`}
      </Text>
      )}
      <Text className={styles.questionText}>
        {ordinal}
        .
        {label}
      </Text>
    </View>
  )
}

export default SurveyHeader
